<template>
  <div class="content-box">
    <heading grade="1" class="titleDistance">参赛者俱乐部/球队<small>{{teamList.length + seedList.length}}个</small></heading>
    <el-row>
      <el-col :span="11">
        <div class="list">
          <div class="list-title">参赛球队</div>
          <div class="list-body">
              <el-row class="list-head">
                <el-col :span="16" class="team">
                  球队
                </el-col>
                <el-col :span="8" class="mark">
                  标记种子
                </el-col>
              </el-row>
              <ul id="team">
                <li v-for="(item,index) in teamList" :key="item">
                  <el-row class="team-item">
                    <el-col :span="4">
                      <x-img class="team-logo" :src="item.iconUrl"></x-img>
                    </el-col>
                    <el-col :span="10" class="team-name hidden">
                      {{item.commingName}}
                    </el-col>
                    <el-col :span="4">
                      <img v-if="item.pcImgtxtUrl" class="sub-logo" :src="item.pcImgtxtUrl"></img>
                      <div v-else style="width:100%;height:1px;"></div>
                    </el-col>
                    <el-col :span="3" class="mark-btn">
                      <el-button class="orange-btn"  @click="handleMark(item,index)" size="small">标记种子</el-button>
                    </el-col>
                  </el-row>
                </li>
              </ul>
          </div>
        </div>
      </el-col>
      <el-col :offset="2" :span="11">
        <div class="list">
          <div class="list-title">种子列表</div>
            <div class="list-body">
              <el-row class="list-head">
                <el-col :span="16" class="team">
                  球队
                </el-col>
                <el-col :span="8" class="mark">
                  种子
                </el-col>
              </el-row>
                <ul id="seed">
                  <li v-for="(item,index) in seedList" :key="item" class="moveable">
                    <el-row class="team-item">
                      <el-col :span="3">
                        <i @click="handleMove(item, index)" class="icon arrow-left"></i>
                      </el-col>
                      <el-col :span="4">
                        <x-img class="team-logo" :src="item.iconUrl"></x-img>
                      </el-col>
                      <el-col :span="10" class="team-name hidden">
                        {{item.commingName}}
                      </el-col>
                      <el-col :span="4">
                        <img v-if="item.pcImgtxtUrl" class="sub-logo" :src="item.pcImgtxtUrl "></img>
                        <div v-else style="width:100%;height:1px;"></div>
                      </el-col>
                      <el-col :span="3" class="rank center">
                        <div>{{index+1}}</div>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
            </div>
        </div>
      </el-col>
    </el-row>
    <div class="btn-wrap">
       <el-button type="primary" :disabled="!seedList.length" size="large" @click="generate()">
         生成签表
       </el-button>
    </div>
  </div>
</template>

<script>
import {cloneObj} from 'utils'
import Sortable from 'sortablejs'
import Api from 'api/race'

export default {
  components: {
    Sortable
  },
  computed: {
  },
  mounted () {
    this.getSeed()
  },
  data () {
    return {
      teamList: [],
      seedList: [],
      olderList: [],
      newList: []
    }
  },
  methods: {
    handleMark (item, index) {
      var team = cloneObj(item)
      this.teamList.splice(index, 1)
      this.seedList.push(team)
      this.setSort()
    },
    handleMove (item, index) {
      var team = cloneObj(item)
      this.seedList.splice(index, 1)
      this.teamList.push(team)
    },
    setSort () {
      const el = document.querySelectorAll('.list-body > ul')[1]
      this.sortable = Sortable.create(el, {
        onAdd: evt => {

        },
        onEnd: evt => {
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        },
        onUpdate: evt => {

        },
        onSort: evt => {

        },
        onRemove: evt => {

        },
        onMove: evt => {

        }
      })
    },
    // 生成签表
    generate () {
      /*
      this.$confirm('签表生成后，待处理的球队将自动拒绝加入，是否生成？', '提示', {
        type: 'warning'
      }).then(() => {
      */
      if (!this.seedList.length) return
      var list = []
      for (var i = 0, l = this.seedList.length; i < l; i++) {
        list.push({
          seedValue: i + 1,
          userId: this.seedList[i].userId
        })
      }
      Api.setSeedUser({ // put种子球队
        matchId: this.$route.query.id,
        seedUser: list
      }).then((res) => {
        Api.checkTableAuto({ // 生成签表
          matchId: parseInt(this.$route.query.id)
        }).then((response) => {
          this.$router.push({
            path: '/race/detail/manage/checktable',
            query: this.$route.query
          })
        })
      })
      // })
    },
    // 获取种子球队
    getSeed () {
      Api.getSeedUser({matchId: this.$route.query.id}).then((res) => {
        var list = res.data
        this.teamList = []
        for (var i = 0, l = list.length; i < l; i++) {
          if (list[i].seedValue === 10000) {
            this.teamList.push(list[i])
          } else {
            this.seedList.push(list[i])
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .list{
    width:402px;
    border: 1px solid #e5e5e5;
    .list-title{
      height: 40px;
      line-height: 40px;
      background: #e9e9e9;
      text-align: center;
      color:#333;
      font-weight: 700;
    }
    .center{
      text-align: center;
    }
    .list-body{
      padding:0 35px 40px 35px;
      height:512px;
      max-height:512px;
      overflow-y: scroll;
      .list-head{
        line-height: 50px;
        color: #666;
        .mark{
          text-align: right;
          padding-right:10px;
        }
      }
      .team{
        text-align: center;
      }
      .team-logo{
        width: 32px;
        height: 32px;
        margin-right: 10px;
        display: inline-block;
        border-radius: 50%;
      }
      .team-item{
        line-height: 60px;
        border-top: 1px solid #f0f0f0;
      }
      .team-name{
        width:125px;
        margin-right: 5px;
        display: inline-block;
      }
      .sub-logo{
        width:53px;
        height:15px;
        margin-right: 5px;
      }
      .mark-btn{
        text-align: right;
        button{
          margin-left: 5px;
        }
      }
      .icon {
        display: inline-block
      }
      .arrow-left{
        background-image: url('/static/images/arrow-circle-lf.png');
        background-repeat: no-repeat;
        width:23px;
        height:23px;
        margin-top: 18px;
        cursor: pointer;
        &:hover{
          background-image: url('/static/images/arr-left.png'); 
        }
      }
      .rank{
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 3px;
        display: inline-block;
        background: #fd9a4c;
        color:#fff;
        margin:20px 0 0 10px;
        font-size: 12px;
      }
    }
  }
  .btn-wrap{
    margin-top:30px;
    text-align: center;
  }
  .moveable{
    cursor: move;
  }
  .list-wrap{
    
  }
  
</style>
